<template>
<div id="app">
  <el-breadcrumb
    separator-class="el-icon-arrow-left"
    style="float:right;ub main-center cross-center"
  >
    <el-breadcrumb-item :to="{ path: '/' }">进货</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- <div class="a4Page">   <button class="btn btn-primary" @click="getPdf()">生成PDF</button>  </div> -->
   <!-- 查询信息的表单 -->

  <el-form style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-top:20px; "  :model="form" label-width="150px">
      <el-input class="input" placeholder="商品名称" v-model="form.commodityName" clearable @clear="chaxun"></el-input>
      <el-date-picker
      style="color:white"
       class="input2"
      v-model="form.date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <el-input class="input" placeholder="供应商名称" v-model="form.supplierName" clearable @clear="chaxun">></el-input>
    <el-button class="btn1" type="primary" @click="chaxun1">查询</el-button>
  </el-form>

   <el-button class="btn1" type="primary" @click="dialogFormVisible3 = true">进货登记</el-button>
      <!-- 进货登记 -->
    <el-dialog style="width:1200px;text-align:center;" title="进货登记" :visible.sync="dialogFormVisible3">
  <el-form :model="purchase" :rules="rules" ref="purchase">
    <el-form-item label="型号" style="margin-top:20px;" :label-width="formLabelWidth" prop="model">
      <el-input class="el-input" v-model="purchase.model" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品名称" style="margin-top:20px;" :label-width="formLabelWidth" prop="productName">
      <el-input class="el-input" v-model="purchase.productName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品入库数" style="margin-top:20px;" :label-width="formLabelWidth" prop="purchaseVolume">
      <el-input class="el-input" v-model="purchase.purchaseVolume" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" style="margin-top:20px;" :label-width="formLabelWidth" prop="remark">
      <el-input class="el-input" v-model="purchase.remark" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="供应商名称" style="margin-top:20px;" :label-width="formLabelWidth" prop="supplierName">
      <el-input class="el-input" v-model="purchase.supplierName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="计量单位" style="margin-top:20px;" :label-width="formLabelWidth" prop="unitofmeasurement">
      <el-input class="el-input" v-model="purchase.unitofmeasurement" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button class="btn5" @click="dialogFormVisible3 = false">取 消</el-button>
    <el-button class="btn6" type="primary" @click="dialogFormVisible3 = false;ruku();">确 定</el-button>
  </div>

  <!-- <span slot="footer" class="dialog-footer">
            
                <el-button type="primary" class="btn3" @click="PrintRow">打 印</el-button>
            </span> -->
</el-dialog>

<!-- 进货单，打印 -->
<el-dialog style="margin-left:-25%; width:2300px;text-align:center; font-weight:bold;" title="" :visible.sync="dialogFormVisible">
 <section ref="print" class="recordImg" id="printRecord">
   <div class="a" style="text-align:center; font-weight:bold;">
  <span class="list3">进货单</span><br>
  <span class="list">收货单位____________</span><br>
  <span class="list2">地址________________</span><span class="list1">__年__月__日</span>
  <span class="cun">第一联:存根</span>
  <table class="edit-table" :model="invo" style="text-align:center;">
    
    <tbody style="text-align:center;">
      <tr>
        <td style="border:3px solid black;">实际出库数量</td>
        <td style="border:3px solid black;">创建时间</td>
        <td style="border:3px solid black;">出库日期</td>
        <td style="border:3px solid black;">退货出库单号</td>
        <td style="border:3px solid black;">型号</td>
        <td style="border:3px solid black;">商品名称</td>
        </tr>
      <tr>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.actualVolume"  value=""></td>
        <td style="border:3px solid black;text-align:center;"><input style="text-align:center;" v-model="invo.createTime" value=""></td>
        <td  style="border:3px solid black;"><input style="text-align:center;" v-model="invo.date" value=""></td>
        <td  style="border:3px solid black;"><input style="text-align:center;" v-model="invo.id" value=""></td>
        <td  style="border:3px solid black;"><input style="text-align:center;" v-model="invo.model" value=""></td>
        <td  style="border:3px solid black;"><input style="text-align:center;" v-model="invo.productName" value=""></td>
        </tr>
      <tr>
        <td style="border:3px solid black;">商品应入库数量</td>
        <td style="border:3px solid black;">备注</td>
        <td style="border:3px solid black;">供应商名称</td>
        <td style="border:3px solid black;">任务状态</td>
        <td style="border:3px solid black;">计量单位</td>
        <td style="border:3px solid black;">更新时间</td>
        </tr>
      <tr>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.purchaseVolume" value=""></td>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.remark" value=""></td>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.supplierName" value=""></td>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.taskStatus" value=""></td>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.unitofmeasurement" value=""></td>
        <td style="border:3px solid black;"><input style="text-align:center;" v-model="invo.updateTime" value=""></td>
        </tr>
        <!-- <tr>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"> <input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        </tr> 
        <tr>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        <td style="border:3px solid black;"><input  value=""></td>
        </tr>    -->
        <tr>
          <td style="border:3px solid black;">合计TOTAL</td>
          <td style="border:3px solid black;text-align:right; float-right:right;margin-right:20px;" colspan="5" >
            百_十_百_千_万_十万_</td>
        </tr>    
    </tbody>
   
  </table>
  
  <span class="list">收货单位及经手人________</span><span class="list1">送货单位及经手人________</span>

</div> </section>
 <div slot="footer" class="dialog-footer">
    <el-button class="btn2" @click="dialogFormVisible = false">取 消</el-button> 
     <el-button type="primary" class="btn22" @click="PrintRow">打 印</el-button>
    <!-- <el-button class="btn22" type="primary" @click="dialogFormVisible = false;">确 定</el-button> -->
     <!-- <span slot="footer" class="dialog-footer">
            
              
            </span> -->
  </div>
</el-dialog>

    <!-- 表格 -->
  <el-table
    ref="filterTable"
    v-loading="loading"
    :data="getCommodity"
    style="width: 100%">   
    <el-table-column
      type="selection"
      width="55">  
    </el-table-column>  
    <el-table-column label="#" type="index" fixed></el-table-column>
    <el-table-column
      prop="commodityCode"
      label="商品编号"
      width="100">
    </el-table-column>
     
        <el-table-column
      prop="productName"
      label="商品名称"
      width="100">
    </el-table-column>
     <el-table-column
      prop="firstClassification"
      label="一级分类名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="secondClassification"
      label="二级分类名称"
      width="120">
    </el-table-column>
      <el-table-column
      prop="supplier"
      label="供应商"
      width="100">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="更新时间"
      width="160">
    </el-table-column>
    <el-table-column
      prop="amount"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="costPrice"
      label="成本价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="currentNumber"
      label="商品当前储量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="discount"
      label="折扣"
      width="100">
    </el-table-column>
    <el-table-column
      prop="inventory"
      label="库存量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="isExchange"
      label="可否换货"
      width="100">
       <template slot-scope="scope">
        <!-- {{scope.row}} -->
        <el-switch v-model="scope.row.isExchange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
    </el-table-column>
    <el-table-column
      prop="isReturn"
      label="可否退货"
      width="100">
       <template slot-scope="scope">
        <!-- {{scope.row}} -->
        <el-switch v-model="scope.row.isReturn" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
    </el-table-column>
    <el-table-column
      prop="maximumCommodity"
      label="商品最大储量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="model"
      label="型号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="outOfStockNumber"
      label="缺货量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="productDesccription"
      label="商品说明"
      width="100">
    </el-table-column>
    <el-table-column
      prop="shelfLife"
      label="保质期限"
      width="160">
    </el-table-column>
    <el-table-column
      prop="unitPrice"
      label="单价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="unitofmeasurement"
      label="计量单位"
      width="100">
    </el-table-column>
    <el-table-column
      prop="vendor"
      label="厂商"
      width="100">
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="200px">
      <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
         <el-button
          class="btn3"
          icon="el-icon-edit"
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)" disabled>进货登记</el-button>
         </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
        <el-button
          disabled
          class="btn3"
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
          </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange" 
      :current-page="queryInfo.pageNum" 
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>



 
            </div>
  </template>
<script>
  import html2Canvas from 'html2canvas'
  import JsPDF from 'jspdf'
export default {
      data() {
        return{
          invo:[],
          loading:true,
          dialogImageUrl: '',
          dialogVisible: false,
          imageURL:'',
          dialogFormVisible:false,
          dialogFormVisible3:false,
          formLabelWidth:'120px',
          purchase:{
            model:'',
            productName:'',
            purshaseVolume:'',
            remark:'',
            supplierName:'',
            unitofmeasurement:''
          },
          rules:{
            model:[
             { required: true, message: '请输入型号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
             productName:[
             { required: true, message: '请输入商品名称，如aaa', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符，如aaa', trigger: 'blur' }
            ],
             purshaseVolume:[
             { required: true, message: '请输入应入库数量', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
            ],
             remark:[
             { required: true, message: '请输入备注', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
             supplierName:[
             { required: true, message: '请输入供应商名称，如string', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符,如string', trigger: 'blur' }
            ],
             unitofmeasurement:[
             { required: true, message: '请输入计量单位', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
          },
          getCommodity:[],
          form:{
            commodityName:'',
            date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            supplierName:''
          },
        total: 0,
        queryInfo: {
          query:'',
          type: 3,
          pageNum: 1,
          pageSize: 2,
        },
         pageNum: 1,
          pageSize:2,
        }
      },
      methods:{
        //打印
        PrintRow(){
            this.$print(this.$refs.print) // 使用
            this.dialogFormVisible = false
        },   
         async chaxun1() {
            
            var year = this.form.date[0].getFullYear()
            var month = this.form.date[0].getMonth() + 1
            var day = this.form.date[0].getDate()
            var hour = this.form.date[0].getHours()
            var minutes = this.form.date[0].getMinutes()
            var second = this.form.date[0].getSeconds()
            var currentTime = year + "-" + (month<10?"0"+month:month) + "-" + (day<10?"0"+day:day) +" "+(hour<10?"0"+hour:hour)+":"+(minutes<10?"0"+minutes:minutes)+":"+(second<10?"0"+second:second)
            
            var year1 = this.form.date[1].getFullYear()
            var month1 = this.form.date[1].getMonth() + 1
            var day1 = this.form.date[1].getDate()
            var hour1 = this.form.date[1].getHours()
            var minutes1 = this.form.date[1].getMinutes()
            var second1 = this.form.date[1].getSeconds()
            var currentTime1 = year1 + "-" + (month1<10?"0"+month1:month1) + "-" + (day1<10?"0"+day1:day1) +""+" "+(hour1<10?"0"+hour1:hour1)+":"+(minutes1<10?"0"+minutes1:minutes1)+":"+(second1<10?"0"+second1:second1)
            
            if(this.form.commodityName == "" || this.form.supplierName == "" || this.form.startTime == "" || this.form.endTime == ""){
               return this.$message.error("有错误，查询条件不能为空")
            }else{
            this.loading = true
            const {data:res} = await this.$http.post('/api/send/getCommodityAndWarehouseInVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
              'commodityName': this.form.commodityName,
              'startTime':currentTime,
              'endTime':currentTime1,
              'supplierName': this.form.supplierName
            })
            if(res.code == 200){
              console.log("分页显示入库")
              console.log(res)
              let getCommodity = res.data
              this.getCommodity = getCommodity
              this.total = res.total
              console.log(getCommodity)
              this.loading = false
            }else{
              return this.$message.error(res.msg)
            }

        }
        },  
        async chaxun() {
          this.loading = true
           const {data:res} = await this.$http.post('/api/send/getCommodityAndWarehouseInVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize) 
          
           
           console.log("分页显示入库")
           console.log(res)
           let getCommodity = res.data
           this.getCommodity = getCommodity
           this.total = res.total
           console.log(getCommodity)
           this.loading = false
        },
        async ruku() {
          const{data:res} = await this.$http.post('/api/send/addPurchaseReceiptAddVo',{
            'model':this.purchase.model,
            'productName':this.purchase.productName,
            'purchaseVolume':this.purchase.purchaseVolume,
            'remark':this.purchase.remark,
            'supplierName':this.purchase.supplierName,
            'unitofmeasurement':this.purchase.unitofmeasurement
          })
          if(res.code == 200){
            this.dialogFormVisible = true
            console.log("入库单")
            console.log(res.data)
         
            let invo = res.data
            this.invo = invo
          }else{
            return this.$message.error(res.msg)
          }
        },
        handleEdit(index, row) {
          this.dialogFormVisible = true
          this.getCommodity = Object.assign({},row)
          this.getCommodity.index = index
      },
      handleDelete(index, rows) {
        this.$confirm('此操作将删除该供应商, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { 
          console.log(index, rows);
          rows.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
          /* 设置分页效果下的方法 */
/* 页面大小的改变触发的方法 */
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.chaxun()
        
      },
      /* 页面数发送改变的时候 */
      handleCurrentChange(newPage) {
        this.pageNum = newPage
        this.chaxun()
      
      },
      getPdf:function(){
          var title = "导出名称";
          html2Canvas(document.querySelector('#printPage'), {
          // allowTaint: true
          useCORS:true//看情况选用上面还是下面的，
         }).then(function (canvas) {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          let pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          let imgWidth = 575.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight)//这里的10是左右边距
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(title + '.pdf')
       })
     },



     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }






      },
      created() {
        this.chaxun()
      }
    }
</script>
<style scoped>
  *{
    margin: 0 auto;
    padding: 0px;
  }
.dialog-footer{
  
  height: 40px;
}
.btn5{
    margin-right: 250px;
    padding: 10px;
}
.btn6{
  padding: 10px;
  
}
  .list1{
  float: right;
  padding-right: 40px;
  margin-bottom: 10px;
}
.list3{
  padding-top: -20px;
  font-size: 20px;
  font-weight: bold;
}
.list{
  float: left;
  
}
.list2{
  float: left;
  margin-left: -150px;
  
}
.btn3{
  margin-left: 10px;
}
.input{
  margin-top: 10px;
  width: 200px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.input2{
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn1{
  background-color: rgb(32, 178, 170);
  margin-top: 10px;
  width: 120px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.btn2{
  margin-left: 500px;
  float: left;
  padding: 10px;
}
.btn22{
  margin-left: 10px;
  float: left;
  padding: 10px;

}
.el-input{
  background-color: black;

}
.btn3{
  margin-left: 10px;
  padding: 10px;
}
.edit-table tr td{
  text-align: center;
}
</style>